<template>
  <section class="tree-node-content" :class="{inline: !hide}">
    <div class="tree-contents" :class="{inline: !hide}">
      <span
        v-if="hide && !hide2"
        class="btn-icon"
        @click="show = !show"
        :class="[!show ? 'el-icon-caret-right' : 'el-icon-caret-bottom']"
      ></span>
      <el-checkbox
        :class="{paddingLeft: hide2}"
        v-model="data[defaultKey.value]"
        @change="clickNode"
      >
        <i
          v-if="special && data.hasSign === 1 && data.first"
          class="fa fa-arrow-circle-o-right" style="color: #1889fa;"
        ></i>
        {{data[defaultKey.name]}}</el-checkbox>
    </div>
    <el-collapse-transition>
      <div v-show="show" class="child-content" :class="{flex: !hide}">
        <tree-node
          v-for="item in data[defaultKey.child]"
          :key="item[defaultKey.key]"
          :data="item"
          :defaultKey="defaultKey"
          :defaultExpand="defaultExpand"
          :special="special"
        ></tree-node>
      </div>
    </el-collapse-transition>
  </section>
</template>

<script>
  import {CollapseTransition} from 'element-ui'
  import TreeNode from './treeNode.vue'
  export default {
    name: 'TreeNode',
    componentName: 'TreeNode',
    data () {
      return {
        show: this.defaultExpand,
        checked: false,
        saveData: null,
        oldData: this.data
      }
    },
    props: {
      data: Object,
      defaultKey: Object,
      defaultExpand: {
        type: Boolean,
        default: () => {
          return true
        }
      },
      special: Boolean
    },
    components: {
      ElCollapseTransition: CollapseTransition,
      TreeNode
    },
    computed: {
      hide () {
        return this.data[this.defaultKey.child].length || this.data.first
      },
      hide2 () {
        return !this.data[this.defaultKey.child].length && this.data.first
      }
    },
    methods: {
      clickNode (value) {
        this.$nextTick(() => {
          this.$store.commit('UPDATE_TREE', this.data)
        })
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.tree-node-content{

  .tree-contents{
    padding-top: 5px;
    .btn-icon{
      color: #b4bccc;
      vertical-align: middle;
      font-size: 17px;
      cursor: pointer;
    }
  }
  .tree-contents.inline{
    display: inline-block;
    width: 200px;
    padding: 5px 0;
  }
  .child-content{
    padding: 5px 0 0;
    margin-left: 30px;
  }
  .child-content.flex{
    display: none;
  }
}
.tree-node-content.inline{
  display: inline-block;
  width: 200px;
}
  .paddingLeft{
    margin-left: 17px;
  }
</style>
